//简单地源码实现路由地方式，哈希和历史路由模式
// 哈希和历史路由模式地监听方法：  onhashchange,  popstate
/**
 * 1. 导入VueRouter地信息
 * 2. Vue.use(VueRouter); //VueRouter得是个插件
 * 3. 实例化路由对象信息  必须得是个类或者构造函数
 * 4. main.js导入路由实例化对象， 
 * 5. 挂载到new Vue上()
 */
let Vue;//Vue地实例对象
//定义路由地方法
class VueRouter {

    //定义一个实例化地构造函数，初始化路由对象信息
    constructor(options) {
        this.$options = options;
        this.mode = options.mode || "hash"

        //定义一个路由映射对象,组装数据，把
        this.routerMap = {};
        this.$options.routes.forEach((item, index) => {
            this.routerMap[item.path] = item;
        })

        //定义一个current数据，表示当前的路由地址信息
        Vue.util.defineReactive(this, 'current', '');

        //监听事件，监听hash路由切换的事件
        if (this.mode == "hash") {
            window.location.href = "#/";
            window.addEventListener("hashchange", this.hashchange.bind(this))
            window.addEventListener("load", this.hashchange.bind(this))
        }else if(this.mode == "history"){
            // window.location.href = "/"
            window.addEventListener("popstate",this.historychange.bind(this))
            window.addEventListener("load",this.historychange.bind(this))
        }


    }
    //哈希路由切换触发的方法实现方式如下所示，路由切换的时候时候触发
    hashchange() {
        console.log("获取路由的地址信息");
        //获取哈希路由的地址，并且进行切换展示。
        this.current = window.location.hash.slice(1) || "/";
    }
    historychange() {
        console.log(window.location.pathname);
        this.current = window.location.pathname;
    }
}

//定义install地方法插件
VueRouter.install = function (_Vue) {
    //获取整个路由对象信息
    Vue = _Vue;//Vue构造函数地赋值

    //定义全局混入，把Vuerouter的对象挂载到Vue的实例对象上去,使用全局混入
    Vue.mixin({
        beforeCreate() {
            if (this.$options.router) {
                Vue.prototype.$router = this.$options.router;
            }
        },
    })
    //定义两个全局组件
    Vue.component("router-link", {
        props: {
            to: {
                type: String,
                required: true,
            },
            tags: {
                type: String,
                default: "a",
            }
        },
        render: function (h) {
            return h(tags,
                { attrs: { href: '#' + this.to } },
                this.$slots.default
            );
        }
    })

    Vue.component("router-view", {
        render(h) {
            //获取当前的路径信息效果展示
            let component = null;
            let { routerMap, current } = this.$router;
            //循环这个对象映射表
            if (routerMap[current]) {
                //获取路由配置表中对应的组件信息
                component = routerMap[current].component;
            }

            return h(component);
        }
    })

}


//抛出这个对象信息
export default VueRouter;
